<script setup lang="ts">
import { onMounted, ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "@/views/hooks";
import { Employee } from "@/api/employee";
import { handleTree } from "@/utils/tree";
import { getDeptList } from "@/api/dept";
import { getJobList } from "@/api/job";
import { getWorkIdList } from "@/api/workId";

const props = withDefaults(defineProps<FormProps<Employee>>(), {
  formInline: () => ({
    id: "",
    userId: "",
    jobId: "",
    deptId: "",
    name: "",
    idCard: "",
    phone: "",
    gender: "",
    married: "",
    education: "",
    salary: 0,
    state: true
  })
});
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const dept = ref<Array<any>>([]);
const job = ref<Array<any>>([]);
const workId = ref<Array<any>>([]);
const disabled = !!newFormInline.value.id;

function getRef() {
  return ruleFormRef.value;
}

function loadDept() {
  getDeptList({ state: true }).then(data => {
    dept.value = handleTree(data); // 处理成树结构
  });
}
function loadWorkId() {
  getWorkIdList({ status: true, current: 1, size: 99 }).then(data => {
    workId.value = data.records;
  });
}

function loadJob() {
  getJobList({ status: true, current: 1, size: 99 }).then(data => {
    job.value = data.records;
  });
}

onMounted(() => {
  loadDept();
  loadJob();
  loadWorkId();
});

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="所属部门" prop="deptId">
          <el-cascader
            v-model="newFormInline.deptId"
            class="w-full"
            :options="dept"
            :props="{
              value: 'id',
              label: 'name',
              leaf: 'isLeaf',
              emitPath: false,
              checkStrictly: true
            }"
            clearable
            placeholder="请选择所属部门"
          >
            <template #default="{ node, data }">
              <span>{{ data.name }}</span>
              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
          </el-cascader>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item v-if="!disabled" label="工号类型" prop="workId">
          <el-select
            v-model="newFormInline.workId"
            clearable
            placeholder="请选择工号类型"
          >
            <el-option
              v-for="(item, index) in workId"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="disabled" label="工号">
          <el-input v-model="newFormInline.workId" :readonly="true" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="职务" prop="jobId">
          <el-select
            v-model="newFormInline.jobId"
            clearable
            placeholder="请选择职务"
          >
            <el-option
              v-for="(item, index) in job"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入姓名"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="性别" prop="gender">
          <DictOption
            v-model="newFormInline.gender"
            code="Gender"
            type="radio"
            placeholder="请选择性别"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="身份证" prop="idCard">
          <el-input
            v-model="newFormInline.idCard"
            clearable
            placeholder="请输入身份证"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="手机" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            placeholder="请输入手机号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="学历" prop="education">
          <DictOption
            v-model="newFormInline.education"
            code="Education"
            type="select"
            placeholder="请选择学历"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="婚姻状况" prop="married">
          <DictOption
            v-model="newFormInline.married"
            code="Marriage"
            type="select"
            placeholder="请选择婚姻状况"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="薪资" prop="salary">
          <el-input
            v-model="newFormInline.salary"
            placeholder="请输入薪资"
            :formatter="
              (value: string) =>
                `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            "
            :parser="(value: string) => value.replace(/¥\s?|(,*)/g, '')"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
